<template>
	<div class="article-lists">
		<el-card class="!border-none" shadow="never">
			<el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true" label-width="130px">
                <el-form-item label="申请时间" class="piker">
					<el-date-picker
						v-model="queryParams.create_time"
						type="date"
						format="YYYY-MM-DD"
						value-format="YYYY-MM-DD"
						placeholder="请选择日期"
					/>
				</el-form-item>
                <el-form-item label="补贴状态">
					<el-select
						class="w-60"
						v-model="queryParams.status"
						placeholder="请选择"
						clearable
					>
						<el-option label="全部" :value="0"/>
						<el-option label="待入帐" :value="99"/>
						<el-option label="入账成功" :value="1"/>
                        <el-option label="入账失败" :value="2"/>
					</el-select>
				</el-form-item>
				<el-form-item label="交易流水号">
					<el-input
						class="w-[240px]"
						v-model="queryParams.sn"
						clearable
					/>
				</el-form-item>
				<el-form-item label="所属城市">
					<el-select-v2
                        v-model="queryParams.area_id"
                        filterable
                        clearable
                        :options="optionCity"
                        placeholder="请选择"
                        class="w-60"
                        :height="280"
                    />
				</el-form-item>
				<el-form-item class="w-80">
                    <el-button type="primary" @click="resetPage">查询</el-button>
					<el-button @click="resetParams">重置</el-button>
				</el-form-item>
			</el-form>
		</el-card>
		<el-card class="!border-none" shadow="never">
            <el-table size="large" v-loading="pager.loading" :data="pager.lists">
				<el-table-column label="序号" type="index" :index="indexAdd" min-width="80" />
				<el-table-column label="单号" prop="sn" min-width="220" />
				<el-table-column label="申请时间" prop="create_time" min-width="190" />
				<el-table-column label="申请人姓名" prop="account_name" min-width="120" />
				<el-table-column label="申请人手机号" prop="user_phone" min-width="160" />
				<el-table-column label="贷款金额" prop="quota" min-width="160" />
				<el-table-column label="补贴方式" prop="subsidy_type" min-width="160" >
					<template #default="{ row }">
						<span v-if="row.subsidy_type == 1">直接补贴</span>
						<span v-if="row.subsidy_type == 2">根据贷款金额返点</span>
					</template>
				</el-table-column>
				<el-table-column label="补贴金额" prop="subsidy_type" min-width="160" >
					<template #default="{ row }">
						<span v-if="row.subsidy_type == 1">{{ row.subsidy_money }}</span>
						<span v-if="row.subsidy_type == 2">{{ row.subsidy_num }}%</span>
					</template>
				</el-table-column>
				<el-table-column label="补贴产品" prop="quota" min-width="160" />
				<el-table-column label="对应渠道" prop="quota" min-width="160" />
				<el-table-column label="渠道城市" prop="quota" min-width="160" >
					<template #default="{ row }">
						<span v-city="row.area_id"></span>
					</template>
				</el-table-column>
				<el-table-column label="平台补贴（元）" prop="money" min-width="160" />
				<el-table-column label="补贴状态" prop="status" min-width="160" >
					<template #default="{ row }">
						<span v-if="row.status == 0">待入账</span>
						<span v-if="row.status == 1">入账成功</span>
						<span v-if="row.status == 2">入账失败</span>
					</template>
				</el-table-column>
				<el-table-column label="关联业务单号" prop="p_sn" min-width="160" >
					<template #default="{ row }">
						<!-- 单据管理 -->
						<el-link type="primary" @click="() => {
							$router.push({ path: getRoutePath('setting.pay.payConfig/commissionOrderlists'), query: { sn: row.p_sn } })
						}">{{ row.p_sn }}</el-link>
					</template>
				</el-table-column>
				<el-table-column label="驳回原因" prop="notice" min-width="160" />
				<el-table-column label="操作完成时间" prop="update_time" min-width="190" />
                <el-table-column label="操作" width="200" fixed="right">
					<template #default="{ row }">
						<el-link v-if="row.status == 0" class="mr-2.5" type="primary" v-perms="['user.money/authSubsidy']" :underline="false" @click="handlePass(row)">申请通过</el-link>
                        <el-button  v-if="row.status == 0" v-perms="['user.money/authSubsidy']" type="danger" link @click="handleCancel(row)">申请驳回</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="flex justify-end mt-4">
				<pagination v-model="pager" @change="getLists" />
			</div>
		</el-card>
        <check_demand v-model:show="checkState.show" :value="checkState.value" @confirm="handleConfirmCheck"></check_demand>
	</div>
</template>
<script lang="ts" setup name="subsidyList">
	import { subsidyList, authSubsidy} from '@/api/finance';
	import { usePaging } from '@/hooks/usePaging';
	import {getRoutePath} from '@/router';
	import feedback from '@/utils/feedback'
    import check_demand from './check_demand.vue'
	import useAppStore from '@/stores/modules/app'
	const useApp = useAppStore()
	const optionCity:any = useApp.optionCity;
	const route = useRoute()
	const queryParams:any = reactive({
		create_time: '',
		status: 0,
        sn: '',
		area_id: ''
	})
	const { pager, getLists, resetPage, resetParams } = usePaging({
		fetchFun: subsidyList,
		params: queryParams
	})
    getLists()
    // 切页序号变化
    const indexAdd = (index: number) => {
        const page = pager.page // 当前页码
        const pagesize = pager.size // 每页条数
        return index + 1 + (page - 1) * pagesize
    }
	
    const checkState:any = reactive({
        id: '',
		show: false,
		value: ''
	})
    const handlePass = async (row:any) => {
		await feedback.confirm('是否确认通过该笔资金入账，入账后平台会将该笔平台补贴发放至用户账户')
        checkState.id = row.id;
        await authSubsidy({
			id: row.id,
			status: 1,
			notice: ''
		})
		getLists()
    }
    const handleCancel = async (row:any) => {
        checkState.id = row.id;
        checkState.value = 2;
        checkState.show = true;
    }
    const handleConfirmCheck = async (value:any) => {
        console.log(value)
        await authSubsidy({
            id: checkState.id,
            ...value
        })
		checkState.show = false;
		getLists()
    }
	
</script>
<style lang="scss" scoped>
.piker{
    width: 370px;
	::v-deep .el-input__wrapper{
		width: 240px;
	}
}
</style>